<template>
	<div>
		<h1 class="title">系统登录</h1>
		<el-form :model="form" ref="formObj" :rules="rules" style="margin-top: 50px; padding: 0 50px" label-width="70px">
			<el-form-item label="登录名" prop="username">
				<el-input v-model="form.username" placeholder="请输入手机号/电子邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="form.password" placeholder="请输入登录密码" show-password></el-input>
			</el-form-item>
			<el-form-item label-width="0">
				<el-button style="width: 100%;" plain type="primary" @click="login">登录</el-button>
			</el-form-item>
			<el-form-item label-width="0">
				<el-link style="position: absolute; right: 0; top: 10px;" :underline="false" @click="findpwd">找回密码</el-link>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { post } from '@/plugins/axios'
import { ref, reactive } from 'vue'
import VueCookies from "vue-cookies"
import router from '@/router'
import path from './path'
import { userMenuStroe } from '@/stores/pinia'
const menuStore = userMenuStroe()
const emits = defineEmits('update:r')
const form = reactive({
	username: '',
	password: ''
})
const formObj = ref()
const rules = reactive({
	username: [
		{ required: true, message: '请输入手机号/电子信箱', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' }
	]
})
function findpwd () {
	emits('update:r', '180deg')
}
function login () {
	post(path.login, form, content => {
		console.dir(content.menu)
		menuStore.setMenu(content.menu)
		VueCookies.set('token', content.token, { expires: '1D' })
		router.push({
			path: '/index'
		})
	}, formObj)
}
</script>

<style scoped lang="scss">
.title {
	text-align: center;
	margin-top: 20px;
	letter-spacing: 2rem;
}
</style>